<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body {
        margin: 12px;
    }
    
    .btn {
        /*margin:0 auto;*/
        background: #ffad2c;
        color: #fff;
        font-size: 12px;
        text-align: center;
        width: 62px;
        padding:12px 8px;
        border-radius: 5px;
        display: inline-block;
    }
    
    ul {
        list-style: none;
        padding: 0;
    }
    
    .img-container {
        font-size: 0;
        padding: 24px 0;
    }
    
    .img-container>li {
        display: inline-block;
        width: 70px;
        height: 70px;
        margin-right: 16px;
        margin-bottom: 24px;
        position: relative;
    }
    
    .img-container>li>img {
        width: 100%;
        height: 100%;
    }
    
    .icon-close {
        position: absolute;
        background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAMAAADyHTlpAAAAYFBMVEUAAAD/+fj/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/+vr/YED/+vr/5eD/bU//////gGf/eFz/7ev/3tf/0cj/xLn/nYn/l4L/u67/inP/uq3GpdAyAAAAEHRSTlMA+8sy7eWlcGlBLIkgNoofcKte0AAAATNJREFUOMuE0FuSgyAQQFHAR4wmNX0xEJ/Z/zKHj1CdcdTcL6rriIDZ1Da1K60tXd205qRbV4FWdbcDWDj+5Yo9eQHAr0voRfqwrB6Ay8GWU5CPwrS38dUCY5RNcQTs9Y8E7Cw7zRb4sHcLzyC7hSfYu8m5JKMcFJN1endskMOCJb9DAcxy0gwU+fejnDa+j/ADxHMagVuiHUzypQm6RCvQO72GPi/74aU3g8qYFrx+Pjx8/5b+MejcQ2saWHWUQLK6yK3QmBoW2ViVuQVq4/SoalXqYZ0pIQ/VZqlDKI0Fka3NUgP7W1md2wAAgzAUXSBiBfbfMpUVoTQ8agoO+xtaYQBYC44FL4DHglxAhCBtMAzYEMwNyAAQAd4EmplhjeIH+A7gO4C32Pjr1AyjGmEEEXcBCdxZo3rkFMcAAAAASUVORK5CYII=) no-repeat center;
        width:22px;
        height:22px;
        background-size:contain;
        right:-11px;
        top:-11px;
    }
    </style>
</head>

<body>
<p>
<div id="show">
</div>
</p>

    <div class="btn" id="btn">
        选择图片
    </div>
    <div class="btn" id="upload">
        上传图片
    </div>
    <div class="btn" id="set_value">
        保存键值对
    </div>
    <div class="btn" id="get_value">
        获取
    </div>
    <ul class="img-container" id="img_container">
        <!-- <li>
            <img src="./avatar-test.jpg">
            <i class="icon-close"></i>
        </li>
         -->
    </ul>
</body>
<script src="../js/jsbridge.js" type="text/javascript" charset="utf-8"></script>
<script  type="text/javascript" charset="utf-8">
	var btn = document.querySelector("#btn");
	// 启用原生选择图片控件，获取缩略图
	btn.addEventListener("click",function(e) {
    // var img_container = document.querySelector("#img_container");
    //         img_container.innerHTML += '<li data-pid="abcdefg-000001" data-pname="avator.jpg" data-porder="0"><img src="./avatar-test.jpg"><i class="icon-close"></i></li>';
    //         return;       
        Jsbridge.exec(null,'getThumbnail',null,function(data) {
            alert("获取缩略图成功！");
            var _html = '';
            for(var i = 0; i < data.length; i++) {
                _html += '<li data-pid="'+data[i].PhotoID+'" data-pname="'+data[i].PhotoName +'" data-porder="'+data[i].PhotoOrder+'"><img src="'+data[i].PhotoContent +'" ><i class="icon-close"></i></li>';
            }
            var img_container = document.querySelector("#img_container");
            img_container.innerHTML += _html;
        });
	});

    //通知原生上传图片到服务器
    var uploadBtn = document.querySelector("#upload");
    uploadBtn.addEventListener("click",function(e) {
        var imgs = document.querySelectorAll("#img_container li");
        var _array = [];
        for(var i = 0; i < imgs.length; i++) {
            var _obj = {
                "PhotoID": imgs[i].attributes['data-pid'].nodeValue,
                "PhotoOrder":imgs[i].attributes['data-porder'].nodeValue,
            };
            _array.push(_obj);
        }
        Jsbridge.exec(null,'uploadPhoto',_array,function(data) {
            alert('上传成功！');
            console.log(data);
        });
    });
    //保存键值对
     var setValueBtn = document.querySelector("#set_value");
    setValueBtn.addEventListener("click",function(e) {
       
        Jsbridge.exec(null,'setSharePreference',"{'key':'tuandai1','value':'小编'}",function(data) {
            alert('保存成功！');
            console.log(data);
        });
    });
     //获取键值对
     var getValueBtn = document.querySelector("#get_value");
    getValueBtn.addEventListener("click",function(e) {
    document.getElementById('show').innerHTML = "uuuu";
       
        Jsbridge.exec(null,'getSharePreference',"tuandai1",function(data) {
        document.getElementById("show").innerHTML=data;
            alert('获取成功！--' + data);
        });
    });
    (function() {
        Jsbridge.appLifeHook(null, null, null, null, null);
    })();

</script>
</html>
